<template>
  <div id="app" class="app-wrapper">
    <el-scrollbar style="height:100%">
      <el-row>
        <el-card shadow="never">
          <div ref="group_echart" :style="'height:' + height" />
        </el-card>
      </el-row>

      <arrow-up ref="arrow_up" />
    </el-scrollbar>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import 'echarts-wordcloud'
import ArrowUp from '@/components/ArrowUp'

export default {
  name: 'Home',
  components: {
    ArrowUp
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 120 + 'px;',
      groupData: [],
      groupChart: undefined,
      spans: ['4', '6', '10'],
      backColor: ['#FFFF00', '#FF8888', '#33CCFF', '#E38EFF', '#CCEEFF']
    }
  },
  mounted() {
    this.initGroupEchart()
  },
  methods: {
    initGroupEchart() {
      this.groupChart = echarts.init(this.$refs.group_echart)
      this.groupChart.showLoading()
      this.groupData = []
      const this_ = this
      this.$http.get('/question/group').then(response => {
        let index = 0
        response.param.forEach(value => {
          this.groupData.push({
            name: value,
            value: index++
          })
        })
        this.groupChart.hideLoading()
        this.groupChart.setOption(this.getGroupOptions(this.groupData))
        this.groupChart.on('click', function(params) {
          this_.exam(params.name)
        })
      }).catch(e => {})
    },
    getGroupOptions(data) {
      return {
        series: [
          {
            type: 'wordCloud',
            gridSize: 40,
            sizeRange: [40, 120],
            rotationRange: [-45, 45],
            autoSize: {
              enable: true,
              minSize: 22
            },
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ')'
                  )
                }
              }
            },
            data: data
          }
        ]
      }
    },
    exam(group) {
      this.$router.push('/exam?group=' + group)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    height: 100%;
    width: 100%;

    .nav {
      width: 100%;
      border-bottom: 1px solid #eee;
      background-color: #fff;
      .logo {
        height: 50px;
        border-radius: 50%;
        margin-top: 5px;
        margin-left: 10px;
      }
      .nav-right {
        padding-top: 15px;
        font-size: 12px;
        float: right;
      }
    }
  }
</style>
